<template>
    <div :info="fileName">
        <span class="fileViewSpanClass" @click="downloadClick" style="color: rgb(6, 142, 177)"><component is="LinkOutlined" /> {{fileNameInfo}}</span>
    </div>
</template>

<script setup lang="ts" name="FileViewComponent">
import {computed, defineProps, ref} from "vue";
import {doThirdServiceValue, doThirdServiceAction} from "@/utils/lowcode/thirdService.ts";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let fileNameInfo = ref("");

function execThen(resValue) {
    if (!resValue && propJson.value.editFlag) {
        fileNameInfo.value = "暂无数据"
    } else {
        fileNameInfo.value = resValue
    }
}

let fileName = computed(() => {
    doFileNameInfo();
})

async function doFileNameInfo() {
    if (propJson.value.editFlag) {
        fileNameInfo.value = "暂无数据"
        return;
    }
    await doThirdServiceValue(propJson.value.fileNameInfo, commonParam.value, execThen, () => {}, null)
}

async function downloadClick() {
    // 编辑模式不触发点击事件
    if (propJson.value.editFlag) {
        return
    }
    // 定义一个标志位，后续同步执行
    let awaitObj = {flag: false, res: true}
    await doThirdServiceAction(propJson.value.fileClickDownloadAction, awaitObj, commonParam.value, ()=>{}, ()=>{}, null);
}
</script>

<style scoped lang="less">
.fileViewSpanClass:hover {
    cursor: pointer;
    text-decoration: underline;
}
</style>